<script name="PaginationBox" setup>
const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  queryData: {
    type: Object,
    default: () => ({}),
  },
});

const currentChange = (val) => {
  props.queryData.current = val;
  emit("changePageNum");
};

const sizeChange = (val) => {
  props.queryData.pageSize = val;
  emit("changePageSize");
};

const emit = defineEmits(["changePageNum", "changePageSize"]);
</script>
<template>
  <el-pagination
    @size-change="sizeChange"
    @current-change="currentChange"
    v-model:current-page="queryData.current"
    :page-sizes="[10, 20, 30, 50]"
    v-model:page-size="queryData.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    background
  >
  </el-pagination>
</template>

<style lang="scss" scoped></style>
